<template>
  <div class="daily-recommend">
    <div>
      <img src="~@/assets/img/dailyrecommend/dailyRecommend.jpg" width="400"  alt="">
    </div>
    <div class="operate">
      <div class="play">
        <img src="~@/assets/img/songlistdetail/play.svg" alt="">
        <span @click="playAll">播放全部</span>
      </div>
      <div class="collect">
        <img src="~@/assets/img/songlistdetail/collect.svg" alt="">
        <span>收藏全部</span>
      </div>
    </div>
    <table id="table">
      <tr class="title-info">
        <td class="other"></td>
        <td class="title">音乐标题</td>
        <td class="singer">歌手</td>
        <td class="album">专辑</td>
        <td class="time">时长</td>
      </tr>
      <tr
        class="detail-info"
        :class="{ active: currentIndex === index }"
        v-for="(item, index) in dailySongs"
        :key="index"
        @dblclick="addSong(index)"
        @click="trClick(index)"
      >
        <td class="other">
          <span>{{ index < 9 ? "0" + (index + 1) : index + 1 }}</span>
          <img
            @click="btnClick(index)"
            v-show="spanIndex.indexOf(index) === -1"
            src="~@/assets/img/songlistdetail/collect2.svg"
            alt=""
          />
          <img
            @click="btnClick(index)"
            v-show="spanIndex.indexOf(index) !== -1"
            src="~@/assets/img/songlistdetail/collect3.svg"
            alt=""
          />
          <img src="~@/assets/img/songlistdetail/download2.svg" alt="" />
        </td>
        <td class="title"
            :class="{dbActive: $store.state.playContent.playId === item.id}">
          {{ item.name }}
        </td>
        <td class="singer">{{ item.ar[0].name }}</td>
        <td class="album">{{ item.al.name }}</td>
        <td class="time">{{item.dt | filterTime}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
  import {dailyRecommend} from "@/network/dailyRecommend";
  import { format } from '@/components/common/utilis'


  export default {
    name: "DailyRecommend",
    data(){
      return {
        dailySongs:[],  //每日推荐音乐
        songlist:[],//‘播放全部’歌单列表
        spanIndex: [], //保存歌曲的索引
        currentIndex: "",
      }
    },
    filters:{
      // 格式化歌曲时间
      filterTime(value){
        return format(value/1000)
      }
    },
    created() {
      this.getRecommendMusic()
    },
    watch:{
      '$store.state.userInfo'(){
        if(!this.$store.state.userInfo){
          this.$message.error("只有登录后才能进入这个页面哦!");
          this.$router.replace("/home");
        }
      },
    },
    methods:{
      //点击按钮收藏歌曲，再点击取消收藏，可以多个同时点击的方法
      btnClick(index) {
        let result = this.spanIndex.indexOf(index);
        if (result === -1) {
          this.spanIndex.push(index);
        } else this.spanIndex.splice(result, 1);
      },
      //点击tr改变背景颜色的方法
      trClick(index) {
        this.currentIndex = index;
      },
      //双击添加歌曲信息的方法
      addSong(index) {
        const songContent = {};
        songContent.playId = this.dailySongs[index].id;
        songContent.playImg = this.dailySongs[index].al.picUrl;
        songContent.playName = this.dailySongs[index].name;
        songContent.player = this.dailySongs[index].ar[0].name;
        // footer里的组件要是监听到添加了a属性会做出响应
        songContent.a = ''
        this.$store.commit("addSongs", songContent);
      },
      playAll(){
        this.dailySongs.forEach(item => {
          const songContent = {};
          songContent.playId = item.id;
          songContent.playImg = item.al.picUrl;
          songContent.playName = item.name;
          songContent.player = item.ar[0].name;
          // songContent.isPlay = true
          this.songlist.push(songContent)
        })
        this.$store.commit('playAll', this.songlist)
        this.$bus.emit('playAllByDailyRecommend')
      },

      getRecommendMusic(){
        dailyRecommend.getRecommendMusic().then(res => {
          this.dailySongs = res.data.data.dailySongs
        })
      },
    },
  }
</script>

<style scoped>
.daily-recommend{
  width: 90%;
  position: absolute;
  top: 44px;
  left: 137px;
  bottom: 50px;
  right: 2px;
  padding: 20px 80px;
  overflow-y: scroll;
}
.operate{
  display: flex;
  margin: 10px 0;
}
.operate>div{
  margin:6px 8px;
  font-size: 14px;
  color: #2a2727;
  padding: 6px 13px;
  border-radius: 15px;
  cursor: pointer;
  border: 1px solid #c1b8b8;
}
.operate>div:hover{
  background-color: rgba(0,0,0,.05);
}
.operate .play:hover{
  background-color: rgb(220, 68, 62);
}
.operate .play{
  background-color: rgb(253,84,78);
  color: #ffffff;
  border: 1px solid transparent;
  margin-left: 0;
}
.operate .play img{
  width: 14px;
  height: 14px;
}
.operate img{
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
/*歌单列表*/
table {
  font-size: 13px;
}
table tr:nth-child(even) {
  background-color: #f9f9f9;
}
tr td {
  display: inline-block;
  line-height: 35px;
  color: #2a2727;
  white-space: nowrap; /*超出的空白区域不换行*/
  overflow: hidden; /*超出隐藏*/
  text-overflow: ellipsis; /*文本超出显示省略号*/
}
table tr:hover {
  background-color: #f0f1f2;
}
.title-info td {
  font-size: 14px;
  color: #959090;
}
.other {
  width: 100px;
  color: #959090;
  padding-left: 8px;
}
.other img {
  position: relative;
  top: 5px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin-left: 6px;
}
.detail-info td{
  color: #8b7d7d;
}
.detail-info .title{
  color: #363333;
}
.title {
  width: 300px;
  white-space: nowrap; /*超出的空白区域不换行*/
  overflow: hidden; /*超出隐藏*/
  text-overflow: ellipsis; /*文本超出显示省略号*/
}
.singer {
  width: 180px;
  padding: 0 20px;
}
.album {
  width: 250px;
}
.time {
  width: 100px;
  padding: 0 20px;
}
/*此处用个id选择器，因为有可能因为权重问题让这个样式被覆盖*/
#table .active {
  background-color: #e5e5e5;
}
#table .dbActive{
  color: #f14465;
}
</style>
